<template>
  <div>
    <div class="governmentWRAP">
      <Header title="品牌" style="background: white"/>
      <div class="swiper-box">
        <div class="uni-margin-wrap">
          <van-swipe class="my-swipe" :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
              <van-image :src="image" class="banner"/>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="brand-type-wrap">
        <span style="font-weight: bold">品牌标签:</span>
        <div
            v-if="labels && labels.length > 0"
            class="labelSelect"
            @click="selectLabels"
        >
          {{ labels[selectedLabelIndex].text }}
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
            :columns="labels"
            @cancel="showPicker = false"
            @confirm="onSelectLabel"
        />
      </van-popup>
      <div class="main-wrap">
        <van-pull-refresh
            class="van_pull_refresh"
            v-model="refreshing"
            @refresh="refresh"
        >
          <van-list
              v-if="list.length > 0"
              class="scenic_list"
              v-model:loading="loading"
              v-model:error="err"
              :finished="finished"
              finished-text="没有更多了"
              error-text="请求失败，点击重新加载"
              @load="loadData"
          >
            <div
                class="box-card"
                @click="
                (e) => {
                  // console.log('clickhandleToDetails',e)
                  handleToDetails(item);
                }
              "
                v-for="(item, index) in list"
                :key="index"
            >
              <img
                  class="img-box"


                  :src="`${fileUrl}/${item.mainImageId}`"

              />
              <div class="unit-nickname-wrap">
                <div class="unit-wrap">
                  <div
                      style="
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;
                      width: 100%;
                      align-items: center;
                    "
                  >
                    <div>{{ item.name }}</div>
                    <a :href="'tel:' + item.telephone" @click.stop>
                      <img
                          src="@/assets/call.png"
                          style="width: 30px; height: 30px"
                      />
                    </a>
                  </div>
                  <!-- <img class="icon" :src="IconPhone" mode="aspectFill" /> -->
                </div>
                <div class="tag-wrap">
                  <div
                      type="primary"
                      v-for="(tag, indexTag) in item.labels"
                      :key="indexTag"
                      class="tagItem"
                  >
                    <van-tag type="primary">{{ tag.name }}</van-tag>
                  </div>
                </div>

                <span class="addrss"><van-text-ellipsis
                    rows="2"
                    :content="getSimpleText(item.detail)"

                />
</span>
              </div>
            </div>
          </van-list>
          <div v-show="!list.length && !loading && !err">
            <div class="none">
              <img
                  class="none_img"
                  src="@/assets/images/index/none1.png"
                  alt=""
              />
              <span>暂无品牌</span>
            </div>
          </div>
        </van-pull-refresh>
      </div>
    </div>
    <div
        v-if="loading"
        style="justify-content: center; align-items: center; display: flex"
    >
      <van-loading type="spinner" size="20"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, computed} from 'vue';
import api from '@/api/index';
import brandImage from '@/assets/brand.png';
import router from '@/router/index';
import {getSimpleText} from '@/utils/string-utils';
import Header from '@/components/header/Header.vue';

const fileUrl = import.meta.env.VITE_FILE_URL;

const loading = ref(false);
const finished = ref(false);
const err = ref(false);
const refreshing = ref(false);
let pageNum = 1;
const pageSize = 10;
const labels = ref([
  {
    text: '全部',
    value: null,
  },
]);
const selectedLabelIndex = ref(0);

function refresh() {
  console.log('refresh');
  pageNum = 1;
  list.value = [];
  refreshing.value = true;
  loadData();
}

function loadData() {
  loading.value = true;
  err.value = false;
  try {
    api
        .getBrandList({
          brandStatus: 0,
          pageSize,
          pageNum,
          labelId:
              labels.value.length > 0 &&
              labels.value[selectedLabelIndex.value].value
                  ? labels.value[selectedLabelIndex.value].value
                  : '',
        })
        .then((resp) => {
          console.log('getBrandList res:', resp);
          if (resp.code == '200') {
            list.value = [...list.value, ...resp.data.records];
            finished.value =
                resp.data.pages === '0' || resp.data.current === resp.data.pages;
            pageNum++;
          }
        })

        .finally(() => {
          console.log('finally');
          loading.value = false;
          refreshing.value = false;
        });
  } catch (error) {
    err.value = true;
  }
}

function getLabels() {
  api.getLabelList().then((res) => {
    if (res && res.data) {
      labels.value = [
        {
          text: '全部',
          value: null,
        },
        ...res.data.map((e) => {
          return {
            text: e.name,
            value: e.id,
            ...e,
          };
        }),
      ];
    }
  });
}

function onSelectLabel(e) {
  selectedLabelIndex.value = e.selectedIndexes[0];
  showPicker.value = false;
  refresh();
}

const list = ref([]);

const images = [brandImage];

const handleToDetails = (e) => {
  // uni.navigateTo({
  //     url: '/mainPages/brandDetails/index'
  // })
  // console.log('handleToDetails',e);
  router.push({
    path: '/new-brandDetails',
    query: {
      id: e.id,
    },
  });
};
const showPicker = ref(false);

function selectLabels() {
  showPicker.value = true;
}

refresh();
getLabels();
</script>
<style scoped lang="scss">
.governmentWRAP {
  width: 100%;
  height: 100vh;
  background-color: #eee;
  display: flex;
  flex-direction: column;

  .swiper-box {
    width: 100%;
    height: 12rem;
  }

  .uni-margin-wrap {
    width: 100%;
    width: 100%;
  }

  .swiper {
    height: 12rem;
  }

  .brand-type-wrap {
    margin-top: 5rem;
    padding-left: 1rem;
    box-sizing: border-box;
    align-items: center;
    height: 4rem;
    display: flex;

    .labelSelect {
      margin-left: 5px;
      border-radius: 5px;
      overflow: hidden;
    }

    // width: 100px;
  }

  .tag-wrap {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
  }

  .tagItem {
    padding: 2px;
  }

  .swiper-item {
    display: block;
    width: 100%;
    height: 30rem;
    line-height: 30rem;
    text-align: center;
  }

  .main-wrap {
    margin-top: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
    flex-flow: 1;
    overflow: scroll;

    .box-card {
      // height: 180px;
      width: 100%;
      background: #fff;
      border-radius: 1rem;
      padding-bottom: 0.8rem;
      box-sizing: border-box;
      margin-bottom: 1rem;

      .img-box {
        border-radius: 1rem 1rem 0rem 0rem;
        width: 100%;
        height: 12rem;
        object-fit: cover;
      }
    }

    .unit-nickname-wrap {
      padding-left: 1rem;
      padding-right: 1rem;
      box-sizing: border-box;

      .unit-wrap {
        display: flex;
        justify-content: space-between;

        .icon {
          width: 2.4rem;
          height: 2.4rem;
        }
      }

      .nick-message {
        font-size: 1.2rem;
      }

      .addrss {
        font-size: 1.2rem;
        color: #ccc;
      }
    }
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  height: 15rem;
  font-size: 20px;
  // height: 200px;
  text-align: center;
  // background-color: #39a9ed;
}

.banner {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

.none {
  display: flex;
  flex-direction: column;
  align-items: center;

  .none_img {
    width: 6rem;
    margin: 14.4rem 0 1rem 0;
  }

  span {
    font-size: 1.4rem;
    color: #666666;
  }
}
</style>
